<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webscoket</title>
    <style>
        body {
            width: 100%;
            height: 100%;
        }

        /** 公共 */
        .common_container {
            position: relative;
            width: 400px;
            display: inline-block;
            vertical-align: top;
            height: 400px;
        }

        /** div1 */
        .all-socket {
            border: 1px solid;
            overflow: auto;
        }

        .all-socket li {
            cursor: pointer;
        }

        /** div2 */
        .content {
            display: inline-block;
            width: 400px;
            height: 400px;
            vertical-align: top;
        }

        /** div3 */
        .video {
            width: 830px;
            border: 1px solid;
            overflow: auto;
        }
    </style>
    <!-- <link rel="stylesheet" href="./style/font.css"> -->
    <!-- Import JavaScript Libraries. -->
    <script type="text/javascript" src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.js"></script>
</head>

<body>
    <div>socket.io</div>
    <div>
        <div class="common_container all-socket">
            <button onclick="getAllSocket()">获取所有链接</button>
            <ul id="allS">
            </ul>
        </div>
        <div class="common_container all-socket">
            <button onclick="getAllRoom()">获取所有房间</button>
            <button onclick="createRoom()">创建一个房间</button>
            <ul id="allR">
            </ul>
        </div>
        <div class="common_container content">
            <input id="input1" type="text">
            <button id="btn1" onclick="but1()">发送</button>
            <button id="btn2" onclick="but2()">房间内广播</button>
            <button id="btn6" onclick="but6()">channel传输</button>
            <br>
            <textarea style="width: 100%;height:calc(100% - 27px);" name="" id="text1" cols="30" rows="10"></textarea>
        </div>
        <div class="common_container video">
            <div>
                <button id="btn3" onclick="myWebrtc.startVideo()">play</button>
                <input id="input2" type="text" placeholder="远程地址">
                <button id="btn4" onclick="myWebrtc.createOffer()">创建offer</button>
                <button id="btn5" onclick="myWebrtc.createChannel()">创建channel</button>
            </div>
            <video id="video1" height="300" width="400" controls autoplay
                style="object-fit: contain;"></video>
                
            <video id="video2" height="300" width="400" controls autoplay
            style="object-fit: contain;"></video>
            <!-- <canvas id="canvas1" height="300" width="400"
                style="height:100%;width:100%;object-fit: contain;position: absolute;display: block;"></canvas> -->
        </div>
    </div>
    <script type="text/javascript" src="./js/vconsole.min.js"></script>
    <script>
        // 初始化
        var vConsole = new VConsole();
    </script>
    <!-- 引入媒体类适配器 -->
    <!-- <script type="text/javascript" src="./js/adapter-7.3.0.js"></script> -->
    <script type="text/javascript" src="./js/webrtc.js"></script>
    <script type="text/javascript" src="./js/socket.io.js"></script>

</body>

</html>